<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="fn" uri="http://java.sun.com/jsp/jstl/functions"%>
<%
	String path = request.getContextPath();
	String basePath = request.getScheme() + "://"
			+ request.getServerName() + ":" + request.getServerPort()
			+ path + "/";
%>

<!DOCTYPE HTML>
<html>
	<head>
		<base href="<%=basePath%>">

		<title>服务</title>
		<link rel="stylesheet" type="text/css" href="<%=basePath%>/jquery/reset.css" />
		<script src="<%=basePath%>/jquery/jquery-3.2.1.js" ></script>
			<style type="text/css">
			a {
				text-decoration: none;
				color: #333;
			}
			.tabs .header {
				border: 1px solid #e5e5e5;
				background: #F6F6F6;
			}
			.tabs .header li {
				float: left;
				height: 50px;
				line-height: 50px;
				padding: 0 15px;
				border-right: 1px solid #e5e5e5;
				cursor: pointer;
			}
			.tabs .header li em {
				color: #FE4400;
				font-weight: 800;
				font-size: 18px;
				margin-left: 10px;
			}
			.tabs .header li.cur {
				background: #fff;
				border-top:2px solid #FE4400;
				margin: -1px 0;
				line-height: 48px;
				cursor: default;
			}
			.tabs .header li.cur a {
				color: #FE4400;
				cursor: default;
			}
			.tabs .panel {
				display: none;
			}
			.tabs .show {
				display: block;
			}
			.demo {
				width: 0;
				height: 0;
				border: 10px solid #000;
				border-left-color: transparent;
				border-right-color: transparent;
				border-top-color: transparent;
				margin-left: 200px;
			}
		</style>
	</head>
	<body>
		
		<div class="tabs">
			<ul class="header clearfix">
				<li class="cur"><a href="#tabs-1">常见问题</a></li>
				<li><a href="#tabs-2">车贷申请指南</a></li>
				<li><a href="#tabs-3">账户与还款</a></li>
			</ul>
			<div id="tabs-1" class="panel show">
			<img src="<%=basePath%>/img/1.png"> 
			</div>
			<div id="tabs-2" class="panel">
			<img src="<%=basePath%>/img/2.png"> 
			<img src="<%=basePath%>/img/2_1.png">
			</div>
			<div id="tabs-3" class="panel">
			<img src="<%=basePath%>/img/3.png"> 
			</div>
		</div>

	</body>
	<script type="text/javascript">
		
		$(function(){

			$('.tabs > .header').on('click', 'li:not(.cur)' ,function( e ){
				e.preventDefault();
				var li = $( this );
				var id = li.children('a').attr('href');

				li.siblings('.cur').removeClass('cur').end().addClass('cur');

				li.parents('.tabs').children('div.show').removeClass('show');

				$( id ).addClass('show');
			});

		});

	</script>
</html>
